<%@ page import="com.ars.common.servlet.Login.getLogUser" %>
<%@ page import="com.ars.common.beans.User.User" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="java.text.SimpleDateFormat, java.util.Date" %>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
	<meta name="description" content="" />
	<meta name="author" content="" />
	<title>后台</title>
	<link href="${pageContext.request.contextPath}/admin/css/styles.css" rel="stylesheet" />
	<script src="${pageContext.request.contextPath}/admin/js/all.js"></script>
	<script src="${pageContext.request.contextPath}/JavaScript/vue.js"></script>
	<script src="${pageContext.request.contextPath}/JavaScript/JQuery.js"></script>
</head>
<body class="sb-nav-fixed">
<%@ include file="include/head.jsp" %>
<div id="layoutSidenav">
	<%@ include file="include/nav.jsp" %>
	<div id="layoutSidenav_content">
		<div class="container-fluid px-4">

			<form role="form" action="${pageContext.request.contextPath}/UpdateActivityInfoServlet?id=${activity.getId()}" method="post" class="app">
				<div class="col-md-12 column">
					<div class="row clearfix">
						<div class="col-md-6 column">
							活动名称<span id="NameNotNull" style="color: #ac2925"></span><input id="ActiveIdName" type="text" class="form-control" name="activityName" value="${activity.getName()}"/>
							<span id="ActiveName" style="color: #ac2925"></span>
						</div>
						<div class="col-md-6 column">
							开始时间<input type="datetime-local" class="form-control" name="beginTime" value="${activity.getBeginTime()}"/>
						</div>
					</div><br>
					<div class="row clearfix">
						<div class="col-md-6 column">
							截止时间<input type="datetime-local" class="form-control" name="endTime" value="${activity.getEndTime()}"/>
							<span id="ActiveEndTime" style="color: #ac2925"></span>
						</div>

						<div class="col-md-6 column">
							活动发布者<input type="text" class="form-control" name="Username" value="${LogUser.getName()}" disabled/>
						</div>
					</div><br>

					<div class="row clearfix">
						<div class="col-md-6 column">
							发布者学号<input type="text" class="form-control" name="UserID" value="${LogUser.getUserID()}" disabled/>
						</div>

						<div class="col-md-6 column">
							活动类型
							<select type="text" class="form-control" name="ActivityType" id="Type">
								<option value="劳动实践" ${activity.getType().equals("劳动实践") ? "selected" : ""}>劳动实践</option>
								<option value="创新创业" ${activity.getType().equals("创新创业") ? "selected" : ""}>创新创业</option>
								<option value="思想成长" ${activity.getType().equals("思想成长") ? "selected" : ""}>思想成长</option>
								<option value="文艺体育" ${activity.getType().equals("文艺体育") ? "selected" : ""}>文艺体育</option>
								<option value="社会实践" ${activity.getType().equals("社会实践") ? "selected" : ""}>社会实践</option>
								<option value="工作履历" ${activity.getType().equals("工作履历") ? "selected" : ""}>工作履历</option>
							</select>
						</div>

					</div><br>

				</div>
				<button type="submit" class="btn btn-success" id="sure">确定</button>
				<button type="reset" class="btn btn-primary">重置</button>
			</form>

		</div>
		<%@ include file="include/foot.jsp" %>
	</div>
</div>
<script>
	window.onload = function() {

		//不为空的标识加载
		var activeName = document.getElementsByName('activeName')[0];
		if (activeName.value === "") {
			$("#NameNotNull").html("*");
		}

		// 获取当前时间
		var now = new Date();

		// 格式化时间为YYYY-MM-DDTHH:MM，
		var year = now.getFullYear();
		var month = ('0' + (now.getMonth() + 1)).slice(-2);
		var day = ('0' + now.getDate()).slice(-2);
		var hours = ('0' + now.getHours()).slice(-2);
		var minutes = ('0' + now.getMinutes()).slice(-2);

		// 设置开始时间输入框的值
		document.getElementsByName('endTime')[0].value = year + '-' + month + '-' + day + 'T' + hours + ':' + minutes;
	};

	var app = new Vue({
		el: ".ActiveApp",
		data: {
			majors:'',
			isClass: false,
			isMajor: false,
			selectedActiveType: '0',
			activeTypes: [
				{ value: '0', name: '劳动实践' },
				{ value: '1', name: '创新创业' },
				{ value: '2', name: '思想成长' },
				{ value: '3', name: '文艺体育' },
				{ value: '4', name: '社会实践' },
				{ value: '5', name: '工作履历' }
			],
			activeMajors: [
				{ value: '0', name: '计算机科学与技术' },
				{ value: '1', name: '软件工程' },
				{ value: '2', name: '物联网工程' },
				{ value: '3', name: '计算机应用' }
			],
		},

		computed: {
			// 将方法转换为计算属性
			activeNumbers: function() {
				var result = [];
				for (var i = 1; i <= 9; i++) {

					result.push({
						value: i,
						name: this.majors + '专业' + i + '班'
					});
				}
				return result;
			}
		},

		methods: {
			updateClassStatus: function(activePlace) {
				this.isMajor = (activePlace === "班级活动");
				// this.updateMajorStatus(activePlace);
			},
			updateMajorStatus: function(activeMajor) {
				this.isClass = true;
			},
			updateMajor: function(activeMajor) {
				this.majors = activeMajor;
			}
		}
	});

	//专业选择发生变化
	$('#Major').change(function() {
		const major = $(this).val();
		const majors = app.activeMajors[major].name;
		app.updateMajorStatus(major);
		app.updateMajor(majors);
	});


	$('#Range').change(function() {
		const activePlace = $(this).val();
		app.updateClassStatus(activePlace); // 更新 Vue 实例中的 isClass 数据
	});


	/*
    * 确认按钮监测输入数据是否完整
    * */


	function checkip(){
		var beginTime = document.getElementsByName('beginTime')[0].value;
		var endTime = document.getElementsByName('endTime')[0].value;
		var activeName = document.getElementsByName('activeName')[0].value;

		if (activeName == "") {
			$("#ActiveName").html("活动名称不能为空");
			return false;
		}

		if (new Date(endTime)  - new Date(beginTime) <= 36000) {
			$("#ActiveEndTime").html("截止时间必须大于开始时间一小时");

			return false;
		}
	}

	//输入活动名称事件
	// 使用 jQuery 的方式来获取和设置元素的值和 HTML 内容
	$("#ActiveIdName").on('input', function() {
		var activeName = $(this).val();
		if (activeName !== "") {
			$("#NameNotNull").html("");
		}
	});
	//鼠标离开输入框事件
	$("#ActiveIdName").blur(function() {
		var activeName = $(this).val();
		if (activeName == "") {
			$("#NameNotNull").html("*");
		}
	});



</script>
<script src="${pageContext.request.contextPath}/admin/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/admin/js/scripts.js"></script>
</body>
</html>